<template>
	<div class="header" id="header">
		<div class="logo-left" @click="goback">
			<img class="sportworld-logo" src="../../../static/img/sportworld_icon.png">
			<span>运动世界</span>
		</div>
		<div class="random">
			<div class="logo">
				<div class="logo-right" @click="showCampusDialog()">
					<span class="user-campus">{{user.uniName}}</span>
					<img class="down_icon1" src="../../../static/img/down_icon.png" v-if="schoolsNum>1">
				</div>
			</div>

			<div class="user-info">
				<span class="user_name">{{user.name}}，欢迎您</span>
			</div>
			<div class="modules" v-if="user.type==1 || user.type==2">
				<div class="module" @click="toData">
					<img src="../../../static/img/dataAnalysis_icon_1.png" class="head_img">
					<span class="title">数据总览</span>
				</div>
				<div v-if="user.uniName != '万航'" class="module" @click="toSemester">
					<img src="../../../static/img/set_black.png" class="head_img">
					<span class="title">学期管理</span>
				</div>
			</div>
			<div class="logoout" @click="handleCommand('loginout')">
				<img src="../../../static/img/login_out2.png">
				<span>退出</span>
			</div>
		</div>

		<el-dialog title="请选择校区" :visible.sync="dialogFormVisible" class="campusList">
			<el-input slot="title" class="inp" placeholder="请输入学校名称" icon="search" v-model="condition" @keyup.enter.native="getCollege"
			 :on-icon-click="getCollege" @blur="getCollege"></el-input>
			<span v-for="item in selSchool" class='item' :key="item" @click="changeCampus(item)">{{item.uniName}}</span>
		</el-dialog>
	</div>
</template>
<script>
	import { mapState, mapActions } from "vuex";

	export default {
		data() {
			return {
				name: "",
				dialogFormVisible: false,
				schoolsNum: "",
				condition: "",
				selSchool: []
			};
		},
		computed: mapState({ user: state => state.user }),
		mounted() {
			this.schoolsNum = this.user.schools.length;
			this.selSchool = this.user.schools;
			this.userInfo();
		},
		methods: {
			...mapActions(["SIGNOUT"]),
			...mapActions(["SIGNIN"]),
			handleCommand(command) {
				if (command == "loginout") {
					this.$http({
						method: "POST",
						url: this.$util.domain + "/campusadminapi/v1/login/logout",
						body: JSON.stringify()
					}).then(response => {
						if (response.data.error == 10000) {
							this.SIGNOUT();
							this.$router.push("/login");
						}
					});
				}
			},
			//切换校区
			userInfo() {
				this.type = this.user.type;
				this.uniName = this.user.uniName;
				if (this.uniName == "万航") {
					let url = window.location.href;
					if (
						url.indexOf("realTime") > 0 ||
						url.indexOf("sportTrend") > 0 ||
						url.indexOf("userAnalysis") > 0 ||
						url.indexOf("sportAnalysis") > 0
					) {
						//
					} else {
						location.href = "/#/realTime";
					}
				}
			},
			changeCampus(item) {
				this.dialogFormVisible = false;
				let newObj = JSON.stringify(this.user);
				newObj = JSON.parse(newObj);
				newObj.rootUnid = item.rootUnid;
				newObj.uniName = item.uniName;
				this.SIGNIN(newObj);

				let type = this.user.type;
				if (type == 1 || type == 2) {
					if (this.user.uniName == "万航") {
						location.reload();
					} else {
						location.href = "/#/teacherManage";
						location.reload();
					}
				} else {
					location.href = "/#/studentManage";
					location.reload();
				}
			},
			showCampusDialog() {
				this.dialogFormVisible = true;
				this.condition = "";
			},
			// 检索学校
			getCollege() {
				this.selSchool = [];
				if (!this.condition.trim()) {
					this.selSchool = this.user.schools;
					return;
				}
				let actNum = null;
				this.user.schools.forEach((item, index) => {
					if (item.uniName.indexOf(this.condition) != -1) {
						if (!actNum) {
							actNum = index;
						}
						this.selSchool = [...this.selSchool, item];
					}
				});
				if (this.selSchool.length == 0) {
					return;
				}

			},
			//学期设置
			toSemester() {
				location.href = "/#/semesterManage";
			},
			//数据总览
			toData() {
				location.href = "/#/realTime";
			},
			goback() {
				if (this.user.type == 3) {
					location.href = "/#/studentManage";
				} else if (this.user.type == 4) {
					location.href = "/#/venueManage";
				} else {
					location.href = "/#/teacherManage";
				}
			}
		}
	};
</script>
<style>
	.header {
		position: relative;
		box-sizing: border-box;
		width: 100%;
		height: 60px;
		font-size: 14px;
		line-height: 60px;
		color: #222222;
		background: #fff;
		font-family: "PingFangSC-Regular";
		cursor: pointer;
		z-index: 100000;
	}

	div.random {
		box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.5);
		overflow: hidden;
	}

	.header .logo {
		float: left;
		width: 40%;
		height: 60px;
		min-width: 420px;
		text-align: center;
		overflow: hidden;
	}

	.logo-left {
		width: 180px;
		height: 60px;
		float: left;
		border: 0;
		background: #333744;
	}

	.logo-left span {
		color: #0398ff;
		position: absolute;
		top: 30px;
		transform: translateY(-50%);
		left: 60px;
	}

	.logo-right {
		float: left;
		margin-left: 30px;
		height: 60px;
	}

	.logo-right .user-campus {
		display: inline-block;
		max-width: 180px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		vertical-align: middle;
	}

	.sportworld-logo {
		width: 35px;
		height: 35px;
		position: absolute;
		left: 15px;
		top: 30px;
		transform: translateY(-50%);
	}

	.down_icon1 {
		line-height: 60px;
		vertical-align: middle;
		cursor: pointer;
	}

	.logoout {
		position: absolute;
		top: 0;
		right: 20px;
		height: 60px;
	}

	.logoout img {
		margin-top: 19px;
		/* margin-top: 18px\9; */
		float: left;
		width: 22px;
		height: 22px;
	}

	#header .head_img {
		width: 20px;
		height: 20px;
		margin-top: 20px;
	}

	.user-info {
		position: absolute;
		left: 40%;
		width: 20%;
		min-width: 200px;
		text-align: center;
		height: 60px;
		line-height: 60px;
	}

	#header span.item {
		float: left;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		width: 180px;
		height: 36px;
		margin-top: 10px;
		margin-right: 10px;
		background-color: #fff;
		/* border: 1px solid #d9d9d9; */
		color: #333;
		font-size: 12px;
		/* text-align: center; */
		line-height: 36px;
		cursor: pointer;
	}

	#header span.item:hover {
		color: #0398ff;
	}

	#header span.activeCollege {
		background: #dddddd;
	}

	.campusList {
		width: 100%;
	}

	#header .campusList .inp {
		display: inline-block;
		width: 300px;
	}

	#header .el-dialog__body {
		height: 290px;
		overflow: scroll;
		padding: 0 20px 10px;
	}

	#header div.modules {
		position: absolute;
		top: 0;
		right: 90px;
	}

	#header div.module {
		width: 100px;
		height: 60px;
		display: inline-block;
		padding-left: 10px;
		box-sizing: border-box;
	}

	#header .title {
		font-size: 14px;
	}

	#header .el-dialog--small {
		top: 60px !important;
		width: calc(100% - 360px);
	}
</style>